<template>
  <div
    v-loading="loading"
    class="img-upload-box"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.6)"
  >
    <div v-for="(file,index) in fileList" :key="file" class="avatar-uploader">
      <el-image v-if="isImage(file)" style="width: 100%;height: 100%" :src="file" fit="contain" />
      <el-image v-else-if="isPdf(file)" style="width: 100%;height: 100%" :src="require('@/assets/pdf.png')" fit="contain" />
      <el-image v-else-if="isExcel(file)" style="width: 100%;height: 100%" :src="require('@/assets/excel.png')" fit="contain" />
      <el-image v-else-if="isWord(file)" style="width: 100%;height: 100%" :src="require('@/assets/word.png')" fit="contain" />
      <video v-else-if="isVideo(file)" :src="file" style="width: 100%;height: 100%" />
      <el-image v-else style="width: 100%;height: 100%" src="@/assets/other.png" fit="contain" />
      <i v-if="!disabled" class="el-icon-error close-icon" @click="onClose(index)" />
    </div>
    <el-upload v-if="!disabled && (multiple || !fileList.length)" :accept="accept" action="" class="avatar-uploader active" :before-upload="beforeUpload">
      <i class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <slot />
  </div>
</template>

<script>
import { uploadFile } from '@/api'

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    accept: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      fileList: []
    }
  },
  watch: {
    value: {
      handler(val) {
        this.fileList = (val || '').split(',').filter(el => el)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    onClose(index) {
      this.fileList.splice(index, 1)
    },
    // 上传之前: 获取file对象进行参数验证
    beforeUpload(file) {
      this.loading = true
      uploadFile(file).then(res => {
        this.loading = false
        if (this.multiple) {
          this.fileList.push(res.data.url)
        } else {
          this.fileList = [res.data.url]
        }
        this.$emit('change', this.fileList.join(','))
      })
      return false
    },
    isImage(file) {
      return /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file)
    },
    isPdf(file) {
      return /\.(pdf|PDF)$/.test(file)
    },
    isExcel(file) {
      return /\.(xls|xlsx|XLS|XLSX)$/.test(file)
    },
    isWord(file) {
      return /\.(doc|docx|DOC|DOCX)$/.test(file)
    },
    isVideo(file) {
      return /\.(mp4|MP4)$/.test(file)
    },
    isOther(file) {
      return !this.isImage(file) && !this.isPdf(file) && !this.isExcel(file) && !this.isWord(file) && !this.isVideo(file)
    }
  }
}
</script>

<style lang="scss">
.file-upload-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.img-upload-box {
  display: flex;
  flex-wrap: wrap;
  .el-upload-list {
    display: none;
  }
  .avatar-uploader {
    width: 98px;
    height: 98px;
    margin-right: 8px;
    margin-bottom: 8px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    position: relative;
    .close-icon {
      position: absolute;
      right: -8px;
      top: -8px;
      font-size: 24px;
      color: #0bc162;
      cursor: pointer;
    }
    &.active {
      cursor: pointer;
      .close-icon {
        display: none;
      }
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px;
    height: 98px;
    line-height: 100px !important;
    text-align: center;
  }
  .avatar {
    width: 98px;
    height: 98px;
    display: block;
  }
}
</style>

